<template>
  <div class="app-container">
    <vaeTable
      :data="list"
      :option="option"
      :page="page"
      :loading="listLoading"
      @pagination="pagination"
      @on-load="onLoad"
    >
    </vaeTable>
  
    <Dialog :show.sync="show">
      <div class="info" v-if="show">
        <vaeForm :formConfig="option" v-model="form" :type="type"></vaeForm>
      </div>
    </Dialog>
  </div>
</template>

<script>
import { getList, getDetail } from "@/api/home";
import vaeTable from "@/components/vae-table";
import Dialog from "@/components/Dialog";
import vaeForm from "@/components/vae-form";
import list from "@/mixin/list";
export default {
  components: { vaeTable, vaeForm, Dialog },
  mixins: [list],
  data() {
    return {
      form: {},
      option: {
        contralWidth: "",
        contralSize: "",
        labelWidth: "120px",
        column: [
          {
            label: "文章名",
            prop: "blog_title",
            type: "input",
          },
          {
            label: "作者",
            prop: "blog_author",
            width: 110,
            type: "input",
          },
          {
            label: "分类",
            prop: "blog_tag",
            width: 120,
            type: "input",
          },
          {
            label: "封面图",
            prop: "blog_cover",
            type: "img",
            width: 70,
          },
          {
            label: "简介",
            prop: "blog_brief",
            type: "input",
          },
          {
            label: "点赞数",
            prop: "likeCount",
            type: "input",
            width: 70,
          },
          {
            label: "评论数",
            prop: "commentCount",
            type: "input",
            width: 70,
          },
          {
            label: "BGM",
            prop: "BGM",
            type: "input",
            width: 70,
          },
          {
            label: "文章内容",
            prop: "blog_content",
            isTab: true,
            type: "markdown",
            width: 70,
          },
        ],
      },
      list: null,
    };
  },
  created() {},
  methods: {
    onLoad() {
      this.listLoading = true;
      getList(this.query).then(
        (res) => {
          if (res.status == 1) {
            this.list = res.data.data;
            this.page.page = res.data.page.page;
            this.page.limit = res.data.page.pageSize;
            this.page.total = res.data.page.total;
          }
          this.listLoading = false;
        }
      );
    },
    // 查看
    handleLook(u) {
      this.show = true;
      this.type = "info";
      getDetail({ id: u.blog_id }).then((res) => {
        if (res.status == 1) {
          this.form = res.data;
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.avatar {
  width: 60px;
  height: 60px;
  object-fit: cover;
}
</style>